<template>
    <div>
        <div class="ml-16px mr-16px">
            <el-row :gutter="16">
                <el-col :span="24" class="mb-16px">
                    <AQData />
                </el-col>
            </el-row>
        </div>
        <div class="ml-16px mr-16px content-container">
            <Title :icon="'file-chart-fill'" :title="'每月排名'"></Title>
            <div class="pl-16px pr-16px">
                <el-table :data="state.tableData" class="w-full">
                    <el-table-column prop="ID" label="ID" align="center" width="180">
                    </el-table-column>
                    <el-table-column prop="Month" align="center" label="月份">
                        <template #default="scope">
                            {{ scope.row.Year }}年{{ scope.row.Month }}月
                        </template>
                    </el-table-column>
                    <el-table-column prop="QueryTimes" align="center" label="查询次数"></el-table-column>
                    <el-table-column prop="Total" align="center" label="查询总量"></el-table-column>
                    <el-table-column prop="AverageRanking" align="center" label="平均排名">
                    </el-table-column>
                </el-table>
            </div>
            <div class="pt-16px pl-26px pr-26px pb-16px page-container flex flex-center">
                <Pagination v-if="state.tableData.length > 0" v-model:total="state.page.total"
                    v-model:page="state.page.curPage" v-model:limit="state.page.pageSizes" :autoScroll="false"
                    @pagination="handlePage" />
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import AQData from '../report/components/AQData.vue'
import Title from '@/components/Title/index.vue'
import { getMonthRankApi } from '@/api/geoBasic'
import { IHistoryRank } from '@/api/geo/types'

const state = reactive({
    tableData: <IHistoryRank[]>[],
    page: {
        total: 0,
        curPage: 1,
        limit: 20,
        pageSizes: 20,
    },
})

async function getMonthRank() {
    const res: ResType = await getMonthRankApi({
        pn: state.page.curPage,
        year:new Date().getFullYear(),
        month:new Date().getMonth()+1
    })
    if (res.code === 200) {
        state.tableData = res.data
        state.page.curPage = res.page as number
        state.page.pageSizes = res.pagesize as number
        state.page.total = res.count
    }
}

function handlePage(value: any) {
    state.page.curPage = value.page
    state.page.limit = value.limit
    getMonthRank()
}

onMounted(() => {
    getMonthRank()
})
</script>

<style scoped></style>